<template>
  <div id="detail">
    <van-swipe :autoplay="3000" indicator-color="#464646">
      <van-swipe-item v-for="(item, index) in goods.imgs" :key="index">
        <!-- <van-image lazy-load :src="item" style="width: 100%;" /> -->
        <img :src="item" style="width: 100%;" alt="">
      </van-swipe-item>
    </van-swipe>
    <div style="height: 8px; background: #f4f4f4"></div>
    <div style="padding: 10px;">
      <div style="font-size: 18px; padding: 5px 0">{{goods.name}}</div>
      <div style="font-size: 20px; color: #ff4949"><span style="font-size: 12px;">￥</span>{{goods.price}}</div>
    </div>
    <div style="height: 8px; background: #f4f4f4"></div>
    <div style="padding: 10px; display: flex; justify-content: space-between">
      <div>规格属性:</div>
      <div>礼盒装</div>
    </div>
    <div style="height: 8px; background: #f4f4f4"></div>
    <div style="padding: 10px; font-size: 12px; color: #ff4949; display: flex;">
      <div style="display: flex; align-items: center">
        <van-icon name="certificate" />正品保证&nbsp;&nbsp;&nbsp;&nbsp;</div>
      <div style="display: flex; align-items: center">
        <van-icon name="certificate" />全国包邮</div>
    </div>
    <div style="height: 8px; background: #f4f4f4"></div>
    <div style="padding: 10px 10px 50px 10px">
      <div style="padding: 5px 0; font-weight: bold">商品详情</div>
      <!-- <van-image lazy-load v-for="(item, index) in detail" :key="index" :src="item"
        style="width: 100%; display: block" /> -->
      <img v-for="(item,index) in detail" :src="item" alt="" style="width: 100%; display: block">
    </div>
    <div class="buy-button" @click="$router.push('/topic/' + goods.sku)">
      立即购买
    </div>

  </div>
</template>
<script>
  import { Swipe, SwipeItem, Icon, } from 'vant';
  import Util from '@/tools/utils'
  export default {
    name: 'detail',
    components: {
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Icon.name]: Icon,
      // [Image.name]: Image
    },
    data: function () {
      return {
        goods: {},
        detail: []
      }
    },
    mounted: function () {
      const sku = this.$route.params.sku
      if (sku) {
        var goods = Util.getSku(sku)
        this.goods = goods
        this.detail = Util.getDetail(sku)
      }

    }
  }
</script>
<style scoped>
  .buy-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ff4949;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    text-align: center;
    color: #FFF;
  }
</style>